<template>
  <el-form :model="ruleForm" ref="ruleForm" :rules="rules">
    <el-form-item label="昵称" prop="userName">
      <el-input type="text" v-model.trim="ruleForm.userName" />
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input type="email" v-model.trim="ruleForm.email" />
    </el-form-item>
    <el-form-item label="手机号" prop="phoneNumber">
      <el-input type="tel" v-model.trim="ruleForm.phoneNumber" />
    </el-form-item>
    <el-form-item label="性别" prop="sex">
      <el-radio-group v-model="ruleForm.sex">
        <el-radio :label="0">男</el-radio>
        <el-radio :label="1">女</el-radio>
        <el-radio :label="2">未知</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="头像" prop="avatar" ref="avatar">
      <el-upload
        action="#"
        :http-request="selectPicUpload"
        accept=".jpg,.jpeg,.png,.git"
        list-type="picture-card"
        :limit="1"
        :file-list="fileList"
        class="uploder"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit">确认修改</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { byteLength } from "@/utils/index";
import { isPhone, validEmail } from "@/utils/validate";
import { update } from "@/api/system/user";
import { uploadImg } from "@/api/user";
export default {
  props: {
    user: {
      type: Object,
      default: () => {
        return {
          name: "",
          email: "",
          sex: 2,
          avatar: "",
          phoneNumber: "",
        };
      },
    },
  },
  data() {
    const validatNum = (rule, value, callback) => {
      if (!isPhone(value)) {
        callback(new Error("请输入正确格式的手机号码"));
      } else {
        callback();
      }
    };
    const validatEmail = (rule, value, callback) => {
      if (!validEmail(value)) {
        callback(new Error("请输入正确格式的电子邮箱"));
      } else {
        callback();
      }
    };
    const validatName = (rule, value, callback) => {
      if (byteLength(value) < 2 || byteLength(value) > 20) {
        callback(new Error("请输入2-20位英文字符或1-10位中文字符"));
      } else {
        callback();
      }
    };
    return {
      fileList: [],
      ruleForm: {
        id: "",
        userName: "",
        email: "",
        sex: 2,
        avatar: "",
        phoneNumber: "",
      },
      rules: {
        phoneNumber: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { validator: validatNum, trigger: "blur" },
        ],
        email: [
          { required: true, message: "请输入电子邮箱", trigger: "blur" },
          { validator: validatEmail, trigger: "blur" },
        ],
        userName: [
          { required: true, message: "请输入昵称", trigger: "blur" },
          { validator: validatName, trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.fileList = [{ name: "头像", url: this.user.avatar }];
    this.ruleForm = {
      id: this.user.id,
      sex: Number(this.user.sex),
      phoneNumber: this.user.phoneNumber,
      email: this.user.email,
      userName: this.user.name,
    };
  },
  methods: {
    submit() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          update({
            id: this.ruleForm.id.toString(),
            sex: this.ruleForm.sex.toString(),
            phoneNumber: this.ruleForm.phoneNumber,
            email: this.ruleForm.email,
            name: this.ruleForm.userName,
            avatar: this.ruleForm.avatar,
          }).then((res) => {
            this.$message({
              message: "更新成功",
              type: "success",
            });
          });
          this.$store.commit("user/SET_INFO", {
            user: {
              id: this.ruleForm.id,
              //   loginName: this.user.loginName,
              sex: this.ruleForm.sex,
              phoneNumber: this.ruleForm.phoneNumber,
              email: this.ruleForm.email,
              name: this.ruleForm.userName,
              avatar: this.ruleForm.avatar,
            },
          });
          this.$store.dispatch("user/getInfo");
          setTimeout(() => {
            this.$router.push("/dashboard");
          }, 200);
        } else {
          return false;
        }
      });
    },
    selectPicUpload(obj) {
      let formData = new FormData();
      formData.append("file", obj.file);
      this.loading = true;
      uploadImg(formData, "avatar_img").then((res) => {
        this.$message({
          message: "上传成功",
          type: "success",
        });
        this.$refs["avatar"].clearValidate();
        this.ruleForm.avatar = res.data.link;
        this.loading = false;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.uploader {
  width: 148px;
  height: 148px;
  overflow: hidden;
}
</style>